<style lang='scss' scoped>
  .text{
    clear: both;
    color: #9B9B9B;
    margin-bottom: 104px;
    margin-top: 100px;
  }

  .m-page{
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .c-body{
    flex: 1;
    background: #303641;
  }

  .title{
    height: 70px;
    font-size:50px;
    color:rgba(255,255,255,1);
    line-height:70px;
    text-align: center;
    margin-top: 48px;
    margin-bottom: 70px;
  }

  .cont{
    margin: 0 auto;
    width: 1128px;
    &>.label{
      text-align: left;
      height:28px;
      font-size:20px;
      color:rgba(255,255,255,1);
      line-height:28px;
      padding-left: 20px;
    }
  }

  .list-wrap{
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
  }

  .item{
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .box{
    overflow: hidden;
    position: relative;
    width: 300px; height: 400px;
    background: #fff;
    margin: 200px auto;
    border-radius:4px;
  }

  .head{
    width: 100%;
    float: left;
    margin: 31px auto 19px auto;
    height:25px;
    font-size:18px;
    color:rgba(0,0,0,1);
    line-height:25px;
    text-align: center;
  }

  .qr-code{
    clear: both;
    width:160px;
    height:160px;
    background: #ccc;
    margin: 0 auto;
  }

  .price{
    width: 100%; height: 36px;
    line-height: 36px;
    font-size:25px;
    text-align: center;
    margin-top: 21px;
  }

  .type{
    height:21px;
    font-size:15px;
    color:rgba(48,54,65,1);
    line-height:21px;
    margin-top: 9px;
    text-align: center;
  }

  .bottom{
    position: absolute;
    width: 100%; height: 50px;
    border-top:1px solid rgba(229,229,229,1);
    left: 0;
    bottom: 0;
    text-align: center;
    line-height: 50px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
  }

  .close{
    position: absolute;
    left: 10px; top: 10px;
    width: 30px; height: 30px;
    cursor: pointer;
  }

  .to{
    font-size: 18px; color: #02BB00;
  }

  .success{
    width: 93px; height: 93px;
    margin: 93px auto 25px auto;
    background: #ccc;
  }

  .success-text{
    clear: both;
    height:28px;
    font-size:20px;
    color:rgba(0,0,0,1);
    line-height:28px;
    text-align: center;
    margin-bottom: 15px;
  }

  .award{
    text-align: center;
    height:21px;
    font-size:15px;
    color:rgba(48,54,65,1);
    line-height:21px;
  }
</style>
<template>
  <section class='m-page'>
    <y-head />
    <div class="c-body">
      <div class="title">商户版套餐</div>
      <div class="cont">
        <div class="label">套餐</div>
        <div class="list-wrap">
          <x-shop-item v-for="i in 5" :key="i" class="item" @click.native="shop"/>
        </div>
      </div>
      <div class="text">采购 或 使用其他方式付款，联系我们：微信或电话 15325719985</div>
    </div>


    <!-- 购买弹框 -->
    <x-pop-wrap v-if="show">

      <!-- 购买前 -->
      <div class="box" slot="box" v-if="0">
        <yd-icon name="error" class="close" color="#9B9B9B" size="15px" @click.native="show = false"></yd-icon>
        <div class="head">购买微代理员（10个）</div>
        <div class="qr-code"></div>
        <div class="price">¥950</div>
        <div class="type">使用微信扫码购买</div>
        <div class="bottom">购买标示默认同意“虚拟服务，不退款”条款</div>
        <div class="bottom to">前往管理后台</div>
      </div>

      <!-- 购买成功 -->
      <div class="box" slot="box" v-else>
        <yd-icon name="error" class="close" color="#FE3824" size="15px" @click.native="show = false"></yd-icon>
        <div class="success"></div>
        <div class="success-text">完成支付，购买成功</div>
        <div class="award">恭喜，已获得微代理员（10个）</div>
        <div class="bottom to">前往管理后台</div>
      </div>

    </x-pop-wrap>
  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        show: false
      }
    }, 

    components: {},

    computed: {
      ...mapState({

      })
    },

    mounted () {

    },

    methods: {
      ...mapActions([

      ]),
      login () {
        let data = {
          userid: '',
          openid: '',
          deviceid: ''
        }
      },
      focus (e) {
        e.target.setAttribute('placeholder', '')
        e.target.style.textAlign = 'left'
      },
      blur (e) {
        e.target.setAttribute('placeholder', '搜索 名称/ID')
        if (!e.target.value) {
          e.target.style.textAlign = 'center'
        }
      },
      shop () {
        this.show = true
      }
    }
  }

</script>

